<template>
  <div class="app-container bg-white">
    <div class="page-body">
      <div class="full-width" id="mul_select">
        <!-- <div style="background:#fff;padding:20px"> -->
          <!-- <div style="display:flex;  justify-content: space-between; align-items: center;"> -->
            <div style="width:50%">
              <div class="tagtitle">图片列表</div>
            </div>
            <div>
              <el-button size="mini" type="success" icon="el-icon-document-add" @click="addtag(1)">新增图片</el-button>
            </div>
          <!-- </div> -->

          <el-table :data="tableData" stripe style="width: 100%;margin-top:20px;" :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
            <el-table-column type="index" width="100" label="序号" align="center"> </el-table-column>
            <el-table-column prop="title" label="banner名称"> </el-table-column>
            <el-table-column prop="surfaceImg" label="图片">
              <template slot-scope="scope">
                <img :src="imgurls + scope.row.surfaceImg" style="width:64px;height:64px" />
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间"> </el-table-column>
            <el-table-column prop="sort" label="排序"> </el-table-column>
            <el-table-column prop="urlType" label="跳转类型">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.urlType == 0 ? '内链' : '外链' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="250">
              <template slot-scope="scope">
                <el-button class="my-btn my-btn--mini my-btn--primary plain" @click="edit(scope.row)">编辑</el-button>
                <el-button class="my-btn my-btn--mini my-btn--danger plain" type="danger" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 新增弹出框 -->
          <el-dialog title="" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="跳转类型" :label-width="formLabelWidth">
                <el-select v-model="form.statu" placeholder="请选择跳转类型" style="width:45%" @change="upclo">
                  <el-option v-for="item in upstatus" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="外链链接" :label-width="formLabelWidth" v-if="outurl">
                <el-input v-model="form.outurls" autocomplete="off" placeholder="请输入外链链接" style="width:45%"></el-input>
              </el-form-item>
              <el-form-item label="内链类型" :label-width="formLabelWidth" v-if="isshow">
                <el-select v-model="form.nltype" placeholder="请选择内链类型" style="width:45%" @change="nlclo">
                  <el-option v-for="item in nltypelist" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="内链ID" :label-width="formLabelWidth" v-if="isshow">
                <el-input v-model="form.nlID" autocomplete="off" placeholder="请填写内链ID" style="width:45%"></el-input>
              </el-form-item>
              <!-- 选择完成内链类型中活动类型之后显示上传活动详情页面 -->
              <el-form-item label="活动详情图片" :label-width="formLabelWidth" v-if="ishdimg">
                 <!-- :url="form.hdimgurl" @onsuccess="onsuccesshd" -->
                <app-uploader ref="hduoloada" accept="image/*" :limit="1" :init-files="form.hdimgurl ? [form.hdimgurl] : []" :file-format="fileFormat" @change="handleImgOption" />
              </el-form-item>
              <!-- <el-form-item label="内链名称" :label-width="formLabelWidth" v-if="isshow">
                <el-input v-model="form.nlname" autocomplete="off" placeholder="请填写内链名称" style="width:45%"></el-input>
              </el-form-item> -->
              <el-form-item label="排序" :label-width="formLabelWidth">
                <el-input v-model="form.bz" autocomplete="off" placeholder="请输入排序" style="width:45%"></el-input>
              </el-form-item>
              <el-form-item label="图片" :label-width="formLabelWidth">
                <app-uploader ref="uoloada" accept="image/*" :init-files="form.imgurl ? [form.imgurl] : []" :file-format="fileFormat" @change="handleImgOption1" />
                <!-- <uploads ref="uoloada" :url="form.imgurl" @onsuccess="onsuccess" /> -->
              </el-form-item>
              <el-form-item label="banner名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" placeholder="请输入banner名称" style="width:45%"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="determine">确 定</el-button>
            </div>
          </el-dialog>
        <!-- </div> -->
      </div>
    </div>
    <div class="text-center">
        <br>
        <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes"
          :page-size="pageSize" :layout="paginationLayout" :total="pagecount">
        </el-pagination>
      </div>
    <!-- <el-pagination class="fy" background :page-size="10" layout="prev, pager, next,total" :total="pagecount" @current-change="paging"> </el-pagination> -->
  </div>
</template>

<script>
import Setting from '@/settings';
import AppUploader from '@/components/AppUploader/index';
import { getContentList, saveContent, removeContent } from '@/api/tag'
import { getChannelList } from '@/api/storecenter'
import { selectBanerList, addBanerListchirden, delBanerListchirden, updatBanerListchirden } from '@/api/banner'
// import uploads from '@/components/upload-elementui'
export default {
  components: {
    // uploads,
    AppUploader
  },
  data() {
    return {
      fullscreenLoading: false,
      tableData: [],
      pagecount: 0,
      pageIndex: 1,
      pageSize: Setting.defaultTablePaginationSize,
      pageSizes: Setting.tablePaginationSizes,
      tableHeaderStyle: Setting.tableHeaderStyle,
      paginationLayout: Setting.tablePaginationLayout,
      brandtitle: '',
      storename: '',
      cityOptions: [],
      imgurls: `${process.env.VUE_APP_FILE_URL}/`,
      dialogFormVisible: false,
      isshow: false,
      objstype: {},
      iseait: false,
      outurl: false,
      bannerid: '',
      ishdimg: false,
      form: {
        name: '',
        bz: '',
        statu: [],
        imgurl: '',
        nltype: '',
        // 外链链接
        outurls: '',
        // 内链ID
        nlID: '',
        // 活动详情图片
        hdimgurl: ''
        // 内链名称
        // nlname: ''
      },
      nltypelist: [
        {
          value: 2,
          label: '分类'
        },
        {
          value: 3,
          label: '商品'
        },
        {
          value: 4,
          label: '活动'
        }
      ],
      upstatus: [
        {
          value: 0,
          label: '内链'
        },
        {
          value: 1,
          label: '外链'
        }
      ],
      // value: '',
      formLabelWidth: '120px',
      fileFormat: ['jpg', 'jpeg', 'png']
    }
  },
  created() {
    this.getContentList()
    this.getqdlist()
  },
  methods: {
    // 上传活动详情图片成功返回事件
    handleImgOption(value) {
      if (value && value.length) {
        this.form.hdimgurl = value[0].fileUrl;
      } else {
        this.form.hdimgurl = '';
      }
    },
     // 上传图片成功返回事件
    handleImgOption1(value) {
      if (value && value.length) {
        this.form.imgurl = value[0].fileUrl;
      } else {
        this.form.imgurl = '';
      }
    },
    // 弹框的确定按钮点击事件
    async determine() {
      // 点击确定时候先判断是新增还是编辑
      if (this.iseait) {
        // this.objstype.name = this.form.nlname
        this.objstype.name = this.form.name
        this.objstype.id = this.form.nlID
        // 进入编辑模块
        const data = await updatBanerListchirden({
          sort: this.form.bz,
          // 分类ID
          typeId: this.$route.params.id,
          surfaceImg: this.form.imgurl,
          extendField: JSON.stringify(this.objstype),
          // 跳转类型
          urlType: this.form.statu,
          creatorId: '2222222',
          title: this.form.name,
          id: this.bannerid
        })
        if (data.code == 200) {
          this.dialogFormVisible = false
          this.$message.success('修改成功')
          this.getContentList()
        }
      } else {
        // 确定按钮之后进入新增模块
        // 再判断是选择了内链还是外链
        if (this.outurl) {
          this.objstype = {}
          this.objstype.url = this.form.outurls
          // 选择了外链
          const data = await addBanerListchirden({
            sort: this.form.bz,
            // 分类ID
            typeId: this.$route.params.id,
            surfaceImg: this.form.imgurl,
            extendField: JSON.stringify(this.objstype),
            // 跳转类型
            urlType: this.form.statu,
            creatorId: '2222222',
            title: this.form.name
          })
          if (data.code == 200) {
            this.dialogFormVisible = false
            this.$message.success('新增成功')
            this.getContentList()
          }
        } else {
          // 选择了内链之后点击确定新增事件
          this.objstype.name = this.form.name
          this.objstype.id = this.form.nlID
          this.objstype.url = this.form.hdimgurl
          const data = await addBanerListchirden({
            sort: this.form.bz,
            // 分类ID
            typeId: this.$route.params.id,
            surfaceImg: this.form.imgurl,
            extendField: JSON.stringify(this.objstype),
            // 跳转类型
            urlType: this.form.statu,
            creatorId: '2222222',
            title: this.form.name
          })
          if (data.code == 200) {
            this.dialogFormVisible = false
            this.$message.success('新增成功')
            this.getContentList()
          }
        }
      }
    },

    async addtag(types, row) {
      this.dialogFormVisible = true
      this.isshow = false
      this.ishdimg = false
      this.iseait = false
      // 1 进入新增
      if (types == 1) {
        this.form = {}

        // 请空图片
        // this.$nextTick(() => {
        //   this.$refs['uoloada'].handleRemoveempty()
        //   this.$refs['hduoloada'].handleRemoveempty()
        // })
      }
      // 点击列表里的编辑进入编辑弹框
      else {
        console.log(row)
        // this.form = {}

        this.bannerid = row.id
        this.iseait = true
        // 如果等于0是内链
        if (row.urlType == 0) {
          this.isshow = true
          this.outurl = false
          // 请空图片
          // this.$nextTick(() => {
          //   this.$refs['hduoloada'].handleRemoveempty()
          //   // })
          // })
          // 并且在这里给内链赋值
          // 内链ID一样直接给
          this.form.nlID = JSON.parse(row.extendField).id
          this.form.name = JSON.parse(row.extendField).name
          this.form.hdimgurl = JSON.parse(row.extendField).url
          if (JSON.parse(row.extendField).Type == 'classification') {
            //如果等于 classification那就是分类内链
            this.form.nltype = 2
            this.ishdimg = false
          } else if (JSON.parse(row.extendField).Type == 'goods') {
            //如果等于goods那就是商品内链
            this.form.nltype = 3
            this.ishdimg = false
          } else if (JSON.parse(row.extendField).Type == 'detail') {
            //如果等于detail那就是活动内链
            this.form.nltype = 4
            this.ishdimg = true
          }
        } else {
          // 说明返回的值是外链
          this.isshow = false
          this.outurl = true
          this.ishdimg = false
          // 并且在这里给外链赋值
          this.form.outurls = JSON.parse(row.extendField).url
        }
        // 跳转类型
        this.form.statu = row.urlType
        // 权重
        this.form.bz = row.sort
        //图片回显
        // this.form.imgurl = ''
        this.form.imgurl = row.surfaceImg

        this.form.name = row.title
      }
    },
    // 获取页面列表
    async getContentList() {
      const data = await selectBanerList({
        // 分页
        pageNum: this.pageIndex,
        pageSize: this.pageSize,
        typeId: this.$route.params.id
      })
      this.tableData = data.data.list
      this.pagecount = data.data.total
    },
    // 编辑按钮
    async edit(row) {
      // this.brandtitle = row.name
      this.addtag(2, row)
    },
    // 删除按钮
    async handleDelete(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const data = await delBanerListchirden({
            id: row.id
          })
          if (data.code == 200) {
            this.$message.success('删除成功')
            this.getContentList()
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 查询列表
    async selects() {
      const data = await getContentList({
        // 分页
        pageNum: this.pageIndex,
        pageSize: this.pageSize,
        name: this.storename
      })
      if (data.code == 200) {
        this.tableData = data.data.list
        this.pagecount = data.data.total
      }
    },
    // 分页操作
    handlePagingChange(event) {
      this.pageIndex = event;
      this.getContentList();
    },
    handleSizeChange(event) {
      this.pageIndex = 1;
      this.pageSize = event;
      this.getContentList();
    },
    //  分页接口点击
    async paging(pageNum) {
      const data = await getContentList({
        pageSize: 10,
        pageNum: pageNum,
        name: this.storename
      })
      this.tableData = data.data.list
      this.pagecount = data.data.total
    },
    // imglist(row) {
    //   this.$router.push({
    //     name: 'addimg',
    //     params: { id: row.id }
    //   })
    // },
    // 获取渠道列表
    async getqdlist() {
      const data = await getChannelList({})
      this.cityOptions = data.data.list
    },
    // 选中渠道平台后触发
    selectpt(val) {
      console.log(val)
    },
    // 新增时的上下架状态
    upclo(val) {
      // 1为商品外链
      if (val == 1) {
        this.outurl = true
        this.isshow = false
        this.form.statu = val
      }
      //进入商品内链
      else {
        this.isshow = true
        this.outurl = false
        console.log('商品内链进入')
        this.form.statu = val
      }
    },
    // 选择完内链类型之后触发事件
    nlclo(val) {
      // 进入分类内链
      if (val == 2) {
        this.objstype = {}
        this.objstype.Type = 'classification'
        this.objstype.id = this.form.nlID
        this.ishdimg = false
      }
      //进入商品内链
      else if (val == 3) {
        this.objstype = {}
        this.objstype.Type = 'goods'
        this.objstype.id = this.form.nlID
        this.ishdimg = false
      }
      //  进入活动内链
      else if (val == 4) {
        this.objstype = {}
        this.objstype.Type = 'detail'
        this.ishdimg = true
        // this.objstype.id = this.form.nlID
      }
    }
  }
}
</script>

<style scoped>
.all {
  height: auto;
  width: 97%;
  background-color: #fff;
  margin: 20px auto;
  margin-top: 50px;
  border-radius: 6px;
  padding: 15px;
  box-shadow: 0 0 4px 0 rgba(200, 200, 200, 0.5);
  padding-bottom: 40px;
}
.tagtitle {
  padding: 0 15px;
  padding-bottom: 23px;
  padding-top: 13px;
  color: #595961;
  font-weight: bold;
  font-size: 18px;
}
.tagtable {
  background-color: #f2f2f6;
  border-radius: 6px;
  height: 70%;
  padding: 15px;
  width: 100%;
}
.tabletitle {
  border-radius: 10px;
  background-color: #fff;
  display: flex;
  padding: 15px;
  /* box-sizing: border-box; */
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0px !important;
}
.fy {
  text-align: center;
  margin-top: 40px;
}
</style>
